<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"
    />
    <meta
      name="keywords"
      content="CSIST,成都软件技术专修学院,后台管理系统,学籍管理系统"
    />
    <meta name="description" content="成都软件技术专修学院学生学籍管理系统" />
    <meta name="author" content="Group 2, Class 1,21 SE" />
    <title>学生异动日志</title>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.min.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="../js/bootstrap-datepicker/bootstrap-datepicker3.min.css"
    />
    <link rel="stylesheet" type="text/css" href="../css/custom/all_page.css" />
  </head>
  <body>
    <div id="main" class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <!-- card start -->
          <div class="card">
            <!-- card-header start -->
            <header
              class="card-header d-flex justify-content-between align-items-center"
            >
              <!-- breadcrumb navigator start -->
              <nav id="nav-title" aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li>当前位置：</li>
                  <li class="breadcrumb-item">日志管理</li>
                  <li class="breadcrumb-item active" aria-current="page">
                    异动日志
                  </li>
                </ol>
              </nav>
              <!-- breadcrumb navigator end -->
              <a
                class="btn btn-outline-primary"
                data-bs-toggle="collapse"
                href="#collapse-query-area"
                role="button"
                aria-expanded="false"
                aria-controls="collapse-query-area"
                @click="toggle"
              >
                {{unfoldOrfold}}查询栏
              </a>
            </header>
            <!-- card-header end -->
            <!-- card-body start -->
            <div class="card-body">
              <!-- query-area card collapse start -->
              <div
                class="card collapse show"
                id="collapse-query-area"
                ref="collapse"
              >
                <!-- query-area card-body start -->
                <div class="card-body py-1">
                  <span class="d-block mx-2 mb-2">查询栏</span>
                  <div class="row">
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="changeType">
                          变更类型
                        </label>
                        <input
                          type="text"
                          id="changeType"
                          class="form-control"
                          placeholder="请输入..."
                          aria-label="查询变更类型的输入栏"
                          v-model="queryGroup.changeType"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="changeReason"
                          >变更理由</label
                        >
                        <input
                          type="text"
                          id="changeReason"
                          class="form-control"
                          placeholder="请输入..."
                          aria-label="查询变更原因的输入栏"
                          v-model="queryGroup.changeReason"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div
                        id="datepicker"
                        class="input-group"
                        data-provide="datepicker"
                      >
                        <!-- bootstrap-datepicker组件提示：在input之外的标签建立组件只会嵌入选择表 -->
                        <label class="input-group-text" for="startDate">
                          操作日期范围
                        </label>
                        <input
                          type="text"
                          id="startDate"
                          class="form-control text-center"
                          placeholder="&lt;起始日期&gt;"
                          aria-label="查询操作日期范围，起始的输入栏"
                          :value="queryGroup.startDate"
                        />
                        <!-- bootstrap-datepicker组件提示：vue无法检测数据变化,无法双向绑定 -->
                        <label class="input-group-text" for="endDate">
                          -
                        </label>
                        <input
                          type="text"
                          id="endDate"
                          class="form-control text-center"
                          placeholder="&lt;结束日期&gt;"
                          aria-label="查询操作日期范围，结束的输入栏"
                          :value="queryGroup.endDate"
                        />
                      </div>
                    </div>
                    <div class="col-auto mb-2">
                      <div class="input-group-text">
                        <div class="form-check form-switch">
                          <label for="isFuzzy" class="form-check-label">
                            模糊查询
                          </label>
                          <input
                            type="checkbox"
                            role="switch"
                            id="isFuzzy"
                            class="form-check-input"
                            v-model="queryGroup.fuzzy"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <button
                        class="btn btn-primary"
                        type="button"
                        @click="query"
                      >
                        查询
                      </button>
                    </div>
                  </div>
                </div>
                <!-- query-area card-body end -->
              </div>
              <!-- query-area card collapse end -->
              <!-- function-area start -->
              <div id="function-area" class="d-flex justify-content-end mb-2">
                <button
                  id="importBtn"
                  class="btn btn-primary mx-2"
                  type="button"
                  @click="importInfo"
                >
                  导入
                </button>
                <button
                  id="exportBtn"
                  class="btn btn-primary mx-2"
                  type="button"
                  @click="exportInfo"
                >
                  导出
                </button>
              </div>
              <!-- function-area end -->
              <!-- spinners start -->
              <div
                class="d-flex align-items-center flex-column my-3"
                v-if="!pagination"
              >
                <div class="text-primary fw-bolder">加载中...</div>
                <div class="spinner-grow text-primary m-3" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </div>
              <!-- spinners end -->
              <div v-else>
                <!-- table start -->
                <table class="table table-hover border-top border-2">
                  <thead>
                    <tr>
                      <!-- <th scope="col" class="text-center">
                      <input
                        type="checkbox"
                        class="form-check-input"
                        v-model="isAll"
                      />
                    </th> -->
                      <th scope="col" class="col-1">序号</th>
                      <th scope="col" class="col-auto">操作用户</th>
                      <th scope="col" class="col-auto">操作对象</th>
                      <th scope="col" class="col-auto">变更类型</th>
                      <th scope="col" class="col-auto">变更理由</th>
                      <th scope="col" class="col-auto">操作日期</th>
                      <th scope="col" class="col-auto">备注</th>
                    </tr>
                  </thead>
                  <tbody>
                    <span>
                      提示：请求成功，请于html\logs_status_page.html:240行补充列表
                    </span>
                  </tbody>
                </table>
                <!-- table end -->
                <!-- pagination start -->
                <nav aria-label="Page navigation example">
                  <ul class="pagination justify-content-center">
                    <li
                      class="page-item"
                      :style="pagination.hasPreviousPage?'':'pointer-events:none;'"
                    >
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        title="上一页"
                        @click="query(pagination.prePage)"
                      >
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li
                      :class="num == pagination.pageNum ? 'page-item active': 'page-item'"
                      v-for="num in pagination.navigatepageNums"
                      :key="num"
                    >
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        v-if="num == pagination.pageNum"
                      >
                        {{num}}
                      </a>
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        v-else
                        @click="query(num)"
                      >
                        {{num}}
                      </a>
                    </li>
                    <li
                      class="page-item"
                      :style="pagination.hasNextPage?'':'pointer-events:none;'"
                    >
                      <a
                        class="page-link"
                        href="javascript:void(0)"
                        title="下一页"
                        @click="query(pagination.nextPage)"
                      >
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <!-- pagination end -->
              </div>
            </div>
            <!-- card-body end -->
          </div>
          <!-- card end -->
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-notify.min.js"></script>
    <script
      type="text/javascript"
      src="../js/bootstrap-datepicker/bootstrap-datepicker.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"
    ></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script
      type="text/javascript"
      src="../js/custom/logs_status_page.js"
    ></script>
  </body>
</html>
